﻿<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%String path = request.getContextPath(); %> 
<!DOCTYPE html>
<html>
<head>
<title>在线视频</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<link href="<%=path%>/resources/css/pages/style.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/resources/css/pages/xcConfirm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path%>/resources/script/js/jquery-1.8.0.min.js" ></script>
<script  type="text/javascript" src="<%=path%>/resources/script/js/vue.js"></script>
<script type="text/javascript" src="<%=path%>/resources/script/js/js.js" ></script>
<script type="text/javascript" src="<%=path%>/resources/script/js/xcConfirm.js" ></script>
</head>
<body>
<div id="contentBody">
<div class="top">
  <div class="top-ct">
    <h3 class="logo"></h3> 
    <span id='span'>
       <a href="<%=path%>/pages/login" id='plogin'><span >您好，请登录！</span></a>
       <a href="<%=path%>/pages/userInfo?userid=${loginUser.id }" id='pshow'><span>${loginUser.nickName}（${loginUser.account }）</span></a>
    </span>
      <p><a href="<%=path%>/index" class="select">首页</a>
	<a href="<%=path%>/pages/mycourse?userid=${loginUser.id}">我的课程</a>
	<a href="<%=path%>/pages/learnhistory?userid=${loginUser.id}">学习历史</a><a href="javascript:void(0);">我的技能</a></p> 
    </div>
</div>
<div class="vp">
	<div class="position"><a href="<%=path%>/index" class="syx">首页</a> > 
	<a href="<%=path%>/pages/mycourse?userid=${loginUser.id}" class="syx">我的课程</a> 
			 > <a href="<%=path%>/pages/subjectdetail?userid=${loginUser.id}&id={{coursedetail.subjectId}}" class="syx">{{coursedetail.subjectName}}</a>  > <a href="javascript:void(0);">{{videopath.chapterName}}{{videopath.sectionName}}</a> </div>
</div>

<div class="video">
 <div class="v-ct">
<div class="v-left">
<!-- <video  id="html5_api" controls="controls" autoplay="autoplay" preload="auto" style="margin-top:10px"  width="100%" height="520px"> -->
<!-- <source v-bind:src="videopath.filePath" type="video/mp4"> -->
<!-- </video> -->
<div id="myvideo"></div>
</div>
<div class="v-right">
  <div class="title">
    <a  href="#" id="p1" onmousedown="p()" style="background:url(<%=path%>/resources/images/pages/images/p1.jpg) ">视频</a>
    <a href="javascript:void(0);" id="p2"  onmousedown="pp()" v-on:click="getDocList()">下载</a>
    <a  href="#" id="p3" onmousedown="ppp()" v-on:click="getConmentsList()">评论</a>
 </div>
<div class="chapter">
<div id="vt1">
 <dl  v-for="pitem in chapterlist">
  <dt><a href="javascript:void(0);">{{pitem.name}}</a></dt>
  <dd style="min-height:40px;height:auto">
  <a :href="sitem.id==videopath.sectionId?'javascript:void(0);':'javascript:checkplay('+sitem.id+');'"  v-for="sitem in pitem.chapter" 
           :style="sitem.id==videopath.sectionId?'background:#777':''">{{sitem.name}}</a></dd>
 </dl>

 </div>
<div id="vt2">
  <dl v-for="item in docList" v-on:click="downloadFile(item.filePath)">
       <dt ><img :src="'<%=path%>/resources/images/pages/images/'+item.bgImg"></dt>
	   <dd>
	      <h3>{{item.nameType}}</h3>
	      <p>{{item.chapterName}} {{item.sectionName}} {{item.fileName}}</p>
	   </dd>
  </dl>
</div>
<div id="vt3">
   <div class="comments">
     <dl v-for="item in conmentsList">
	    <dt><img src="<%=path%>/resources/images/pages/images/userphoto.jpg" />
		    <div class="userinfo">
		    	 <h3>{{item.userName}}</h3>
		       <span>{{item.recordTime.substring(5,10)}}</span>
		    </div>
	    </dt>
	   <dd>
	      <p>{{item.content}}</p>
	   </dd>
     </dl>
  </div>
  <div class="stars">
      <span class='starstitle'>评分</span>
      <div id="score1" v-on:click="setScore(1)" class="stars1" style="width:28px;height:28px;display:inline-block"></div>
      <div id="score2" v-on:click="setScore(2)" class="stars1" style="width:28px;height:28px;display:inline-block"></div>
      <div id="score3" v-on:click="setScore(3)" class="stars1" style="width:28px;height:28px;display:inline-block"></div>
      <div id="score4" v-on:click="setScore(4)" class="stars1" style="width:28px;height:28px;display:inline-block"></div>
      <div id="score5" v-on:click="setScore(5)" class="stars1" style="width:28px;height:28px;display:inline-block"></div>
  </div>
  <div id="sendConments"> 
  		<input id="ccontent" placeholder="评论内容" class ="ccontent" value="">
  		<button v-on:click="sendConments()" class="sendMsg">发表</button> 
  </div>
</div>


</div>

</div>
</div>

</div>

<div class="clear"></div>

<div class="foot">
<div class="foot-top"></div>
<div class="foot-ct"><p>Copyright © 2016 业主单位：福建工程学院，建设单位：福州森泽信息科技有限公司 技术服务热线：87862229
   <a href="#"><img src="<%=path%>/resources/images/pages/images/cnzz.jpg"></a></p></div>

</div>
<script type="text/javascript" src="<%=path%>/resources/script/requestjs/myvideo.js"></script>
<script type="text/javascript"  language="JavaScript">
$(function(){
	var myName='${loginUser.id}';
	if(myName==""||myName==undefined)
	{
		document.getElementById('plogin').setAttribute("style", "display:inline");
		document.getElementById('pshow').setAttribute("style", "display:none");
	}
	else{
		document.getElementById('plogin').setAttribute("style", "display:none");
		document.getElementById('pshow').setAttribute("style", "display:inline");
	}
	var urlStr=location.search;
	var urlPara=[];
	var parObj=new Object();
	if(urlStr.indexOf("?")!=-1)
	{
		urlPara=urlStr.substr(urlStr.indexOf("?")+1).split("&");
	}
	for(var i=0;i<urlPara.length;i++)
	{
			parObj[urlPara[i].split("=")[0].toString()]=urlPara[i].split("=")[1].toString();
	}
	window.onload=function(){
		var myName='${loginUser.id}';
		if(myName==""||myName==undefined)
		  {
			  return false;
		  }
		else{
			$.ajax({
		         type: "post",
		         url: "saveStudyHistory",
		         dataType: "json",
		         data: { sectionId: parObj["sectionId"],flag:"create",content:""},
		         success: function (result) {
		         	
		         },
		         error: function () {
		             return;
		         }
		      });
		}
	};
});

window.onbeforeunload=function(){
	var urlStr=location.search;
	var urlPara=[];
	var parObj=new Object();
	if(urlStr.indexOf("?")!=-1)
	{
		urlPara=urlStr.substr(urlStr.indexOf("?")+1).split("&");
	}
	for(var i=0;i<urlPara.length;i++)
	{
			parObj[urlPara[i].split("=")[0].toString()]=urlPara[i].split("=")[1].toString();
	}
	var sectionId=parObj["sectionId"];
	$.ajax({
        type: "post",
        url: "saveStudyHistory",
        dataType: "json",
        async:false,
        data: { sectionId: sectionId,flag:"end",content:""},
        success: function (result) {
        	
        },
        error: function () {
            return;
        }
     });
}
var isLogin=function(){
	if("${loginUser.id}"==""||"${loginUser.id}"==undefined)
		return false;
	return true;
}

</script>
</div>
</body>
</html>
